<template>
  <div v-if="tabsState === 0 && seeState" class="middle-bed">
    <p class="view-patients">
      <span style="cursor: pointer" @click="goback"
        ><img class="title-img" src="../../assets/image/left-jt.png" alt=""
      /></span>
      <span>推荐床位</span>
      <span style="color: #217dfa; cursor: pointer" @click="handleSeeBed"
        >查看所有床位>></span
      >
    </p>
    <div style="margin: 6px 0 0 15px">
      <Button size="medium" @click="handlebedRegister('1')">床位预约</Button>
    </div>
    <div class="tabsbed">
      <span
        style="margin-right: 55px"
        :class="tabsbedState === '1' ? 'span-active' : ''"
        @click="tabsbedClick('1')"
        >集中床位</span
      >
      <span
        style="margin-right: 55px"
        :class="tabsbedState === '0' ? 'span-active' : ''"
        @click="tabsbedClick('0')"
        >非集中床位</span
      >
    </div>
    <div>
      <Empty v-if="bedList.length === 0" style="margin: 20px auto" />
      <div v-loading="bedListloading">
        <div class="department-box">
          <div
            v-for="(elm, index1) in bedList"
            :key="index1"
            class="ment"
            :style="
              'width:' + (elm.length * 110 + (elm.length - 1) * 10) + 'px'
            "
          >
            <div class="ment-box">
              <div
                v-for="bed in elm.children"
                :key="bed.bedNo + '-' + index1"
                class="ment-position"
                :class="[bed.sexColor, bed.checked ? 'ment-active' : '']"
                style="cursor: pointer"
                @click="handleBed(bed, '1')"
              >
                <div class="room-status">
                  <img
                    v-if="bed.isHisConfirm === '1'"
                    src="../../assets/image/time-icon.png"
                    class="status-img"
                    alt=""
                    style="width: 12px; height: 12px"
                  />
                  <img
                    v-if="bed.occupationState === '0'"
                    src="../../assets/image/occupationState-logo.png"
                    class="status-img"
                    alt=""
                  />
                  <img
                    v-if="bed.ifGy === '1'"
                    src="../../assets/image/red-flone.png"
                    class="status-img"
                    alt=""
                    style="width: 10px; height: 14px"
                  />
                </div>
                <div class="room-num">{{ bed.name }}</div>
                <div class="ment-name">{{ bed.patinetName }}</div>
                <div
                  v-if="
                    bed.patinetName === null && bed.sexColor !== 'three-div'
                  "
                  class="ment-name"
                >
                  <img src="../../assets/image/ffffff.png" alt="" />
                </div>
                <div
                  v-if="
                    bed.patinetName === null && bed.sexColor === 'three-div'
                  "
                  class="ment-name"
                >
                  <img src="../../assets/image/eeeeeee.png" alt="" />
                </div>
              </div>
            </div>
            <div class="house-num">
              <div>{{ message.deptName }}{{ message.nurseCellName }}</div>
              <div>（{{ elm.roomNum }}）</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择床位 -->
    <Drawer
      title="选择床位"
      :visible="SeeBedVisible"
      width="50%"
      hide-footer="true"
      @cancel="
        () => {
          SeeBedVisible = false;
          form.bedAll.allbed = false;
          districtChangeVal = '1';
        }
      "
    >
      <div class="form-bed">
        <p>
          <span class="bed-title">院区：</span>
          <span>
            <el-select
              v-model="districtChangeVal"
              placeholder="请选择"
              size="mini"
              clearable
              filterable
              @change="districtChange"
            >
              <el-option
                v-for="item in form.districtCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <el-checkbox
              v-model="form.hospitalArea.sxhospital"
            >三香院区</el-checkbox>
            <el-checkbox
              v-model="form.hospitalArea.xghospital"
            >浒关院区</el-checkbox> -->
          </span>
        </p>
        <p>
          <span class="bed-title">病区：</span>
          <span>
            <el-select
              v-model="form.illnessArea"
              placeholder="请选择"
              size="mini"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in form.illnessAreaoptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </span>
        </p>
        <p>
          <span class="bed-title">科室：</span>
          <span>
            <el-select
              v-model="form.department"
              placeholder="请选择"
              size="mini"
              clearable
              filterable
              @change="beddeptChange"
            >
              <el-option
                v-for="(item, index) in form.departmentoptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </span>
        </p>
        <p>
          <span class="bed-title">床位类型：</span>
          <span>
            <el-select
              v-model="bedTypeOpt"
              placeholder="请选择"
              size="mini"
              clearable
              filterable
              @change="bedTypeOptChange"
            >
              <el-option
                v-for="item in form.bedTypeOptList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <el-checkbox v-model="form.bedType.jzbed">集中床位</el-checkbox>
            <el-checkbox
              v-model="form.bedType.fjzbed"
            >非集中床位</el-checkbox> -->
          </span>
        </p>
        <p class="btn-p">
          <Button @click="_bedQuery">查询</Button>
          <Button style="margin-left: 10px" type="info" @click="_bedReset"
            >重置</Button
          >
        </p>
      </div>
      <div style="margin: 6px 0 0 15px">
        <Button size="medium" @click="handlebedRegister('2')">床位预约</Button>
      </div>
      <div v-loading="bedListArrloading">
        <Empty v-if="bedListArr.length === 0" style="margin: 20px auto" />
        <template v-if="bedListArr.length !== 0">
          <div class="department-box">
            <div
              v-for="(val, key) in bedListArr"
              :key="key"
              class="ment"
              :style="
                'width:' + (val.length * 110 + (val.length - 1) * 10) + 'px'
              "
            >
              <div class="ment-box">
                <div
                  v-for="(bed, index1) in bedListArr[key]"
                  :key="bed.bedNo + index1"
                  class="ment-position drag"
                  :class="[bed.sexColor, bed.checked ? 'ment-active' : '']"
                  style="cursor: pointer"
                  @click="handleBed(bed, '2')"
                >
                  <div class="room-status">
                    <img
                      v-if="bed.isHisConfirm === '1'"
                      src="../../assets/image/time-icon.png"
                      class="status-img"
                      alt=""
                      style="width: 12px; height: 12px"
                    />
                    <img
                      v-if="bed.occupationState === '0'"
                      src="../../assets/image/occupationState-logo.png"
                      class="status-img"
                      alt=""
                    />
                    <img
                      v-if="bed.ifGy === '1'"
                      src="../../assets/image/red-flone.png"
                      class="status-img"
                      alt=""
                      style="width: 10px; height: 14px"
                    />
                  </div>
                  <div class="room-num">{{ bed.name }}</div>
                  <div class="ment-name">{{ bed.patinetName }}</div>
                  <div v-if="bed.occupationState === '0'" class="ment-name">
                    {{ bed.occupationBed.patientName }}
                  </div>
                  <div
                    v-if="
                      bed.patinetName === null &&
                      bed.sexColor !== 'three-div' &&
                      bed.occupationState !== '0'
                    "
                    class="ment-name"
                  >
                    <img src="../../assets/image/ffffff.png" alt="" />
                  </div>
                  <div
                    v-if="
                      bed.patinetName === null &&
                      bed.sexColor === 'three-div' &&
                      bed.occupationState !== '0'
                    "
                    class="ment-name"
                  >
                    <img src="../../assets/image/eeeeeee.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="house-num">
                {{ key }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  addPatientBed,
  // getEemptysByPatien,
  getReservationDetail,
  getEemptyBedsDetailsNew,
  getHisCwglDeptByAreaCode,
  determineSPD,
} from "../../utils/apis/InpatientRegistration.js";
import {
  getDeptList,
  getPatientAreaDTO,
  getWardList,
} from "../../utils/apis/registrationApi";

export default {
  props: {
    // 接收父组件传来的值
    tabsState: {
      type: Number,
      default() {
        return 0;
      },
    },
    seeState: {
      type: Boolean,
      default() {
        return true;
      },
    },
    bedmassage: {
      type: Object,
      default() {
        return {};
      },
    },
    bedpatient: {
      type: Object,
      default() {
        return {};
      },
    },
    distrietCode: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      districtChangeVal: "1",
      bedTypeOpt: "1",
      bedList: [], // 床位列表
      bedListArr: {}, // 全部床位列表
      tabsbedState: "0", // 推荐床位tab切换
      bedListloading: false, // 推荐床位加载
      SeeBedVisible: false, // 查看更多床位
      form: {
        districtCode: [
          {
            label: "三香院区",
            value: "1",
          },
          {
            label: "浒关院区",
            value: "2",
          },
        ],
        hospitalArea: {
          sxhospital: true,
          xghospital: false,
        },
        department: "全部",
        illnessArea: "",
        bedState: {
          kongbed: true,
          feikongbed: true,
        },
        bedTypeOptList: [
          {
            label: "集中",
            value: "1",
          },
          {
            label: "非集中",
            value: "0",
          },
        ],
        bedType: {
          jzbed: true,
          fjzbed: false,
        },
        departmentoptions: [],
        illnessAreaoptions: [],
        bedAll: {
          allbed: false,
        },
      },
      bedListArrloading: false, // 查看更多床位加载
      bedmge: {},
      bedId: "",
      patinetName: "",
      ifGy: "",
      patientSex: "",
      bedDeptCode: "",
      patientName: "",
      patientId: "",
      message: {
        deptName: "",
        nurseCellName: "",
      },
      roomNo: "",
      nurseCellCode: "",
      paramsObj: {},
      stateVal: ''
    };
  },
  mounted() {},
  methods: {
    // 返回列表
    goback() {
      this.$emit("revert", false);
    },
    // 查看床位
    handleSeeBed() {
      this.bedId = "";
      this.SeeBedVisible = true;
      this.bedListArr = [];
      this.districtChange("1");
      // this.getWard()
      this.getBedList();
    },
    // 查看更多获取房间
    getBedList() {
      // console.log(111111111)
      const parms = {
        areaCode: "",
        bedState: "b",
        bedType: "",
        deptCode: "",
        districtCode: "",
        name: "",
      };
      this.bedListArrloading = true;
      const bedTypeCodeList = [];
      const districtCodeList = [];
      const isEmptyCodeList = "b";
      if (this.form.bedType.jzbed) {
        parms.bedType = "1";
      }
      if (this.form.bedType.fjzbed) {
        parms.bedType = "0";
      }
      if (this.form.hospitalArea.sxhospital) {
        parms.districtCode = "1";
      }
      if (this.form.hospitalArea.xghospital) {
        parms.districtCode = "2";
      }
      // const parms = {
      //   bedTypeCodeList: bedTypeCodeList,
      //   districtCodeList: districtCodeList,
      //   sfkc: isEmptyCodeList,
      //   name: '三香总院'
      // }
      // if (!this.form.bedAll.allbed) {
      //   parms.patientSex = this.patientSex // 患者性别-根据患者获取床位用
      // }
      if (this.form.illnessArea !== "") {
        parms.areaCode = this.form.illnessArea;
      }
      if (this.form.department !== "全部") {
        parms.deptCode = this.form.department;
      }

      getEemptyBedsDetailsNew(parms).then((res) => {
        if (res.data.code === 200) {
          for (const key in res.data.data) {
            res.data.data[key].forEach((item) => {
              item.checked = false;
            });
          }
          this.bedListArr = res.data.data;
          // console.log('this.bedListArr', this.bedListArr)
          this.bedListArrloading = false;

          // 这里添加bed.checked 为false
          // this.warploading = false
          // this.allRoom = res.data.data
        }
      });

      // getEemptysByPatien(parms).then((res) => {
      //   if (res.data.code === 200) {
      //     this.bedListArrloading = false
      //     res.data.data.forEach((item) => {
      //       item.roomAndBedList.forEach((el) => {
      //         el.forEach((bed) => {
      //           bed.checked = false
      //         })
      //       })
      //     })
      //     this.bedListArr = res.data.data
      //   }
      // })
    },
    districtChange(val) {
      if (val === "1") {
        this.form.hospitalArea.sxhospital = true;
        this.form.hospitalArea.xghospital = false;
      } else {
        this.form.hospitalArea.sxhospital = false;
        this.form.hospitalArea.xghospital = true;
      }
      this.getmoreAdd();
    },
    bedTypeOptChange(val) {
      // console.log(val)
      if (val === "1") {
        this.form.bedType.jzbed = true;
        this.form.bedType.fjzbed = false;
      } else {
        this.form.bedType.jzbed = false;
        this.form.bedType.fjzbed = true;
      }
    },
    // 床位预约 ？
    handlebedRegister(state) {
      const a = /(1052|1804|1051)+/;
      if (this.bedId === "") {
        this.$message.error("请选择床位");
      } else if (this.ifGy !== "1") {
        this.$message.error("此床位为非集中床位，请选择有小红旗的空床");
        this.bedId = "";
        this.ifGy = "";
        this.patinetName = "";
        this._handlebed(state);
      } else if (this.patinetName !== null) {
        this.$message.error("此床位已有人住，请选择空床");
        this.bedId = "";
        this.ifGy = "";
        this.patinetName = "";
        this._handlebed(state);
      } else if (this.patientSex === "1" && a.test(this.bedDeptCode)) {
        this.$message.error("男性病人不可以预约产科或妇科的床位请选择其他床位");
        this.bedId = "";
        this.ifGy = "";
        this.patinetName = "";
        this.bedDeptCode = "";
        this._handlebed(state);
      } else {
        const params = {
          bedId: this.bedId,
          name: this.patientName,
          patientId: this.patientId,
        };
        if (this.bedsex !== this.patientSex && this.bedsex !== "3") {
          const content =
            "<div style=" +
            "color:#FC9691;text-align:center;margin-bottom:10px;" +
            ">" +
            "当前床位为异性床位确认要预约吗？" +
            "</div>";
          this.$confirm({
            content: content,
            title: "确认信息",
            okFn: (res) => {
              this.paramsObj = params;
              this.stateVal = state
              this.handlePackdge();
            },
            cancelFn: (res) => {
              this.bedId = "";
              this.ifGy = "";
              this.patinetName = "";
              this.sex = "";
              this.nurseCellCode = "";
              this.roomNo = "";
              this._handlebed(state);
            },
          });
        } else {
          const content = `<div style="word-break:break-all;width:386px">${this.patientName}将分配至${this.bedinfo}号床,确定此操作吗？</div>`;
          this.$confirm({
            content: content,
            title: "确认信息",
            okFn: (res) => {
              this.paramsObj = params;
              this.stateVal = state
              this.handlePackdge();

              // this.$refs.print.$el.click()
            },
            cancelFn: (res) => {
              this.bedId = "";
              this.ifGy = "";
              this.patinetName = "";
              this.sex = "";
              this.nurseCellCode = "";
              this.roomNo = "";
              this._handlebed(state);
            },
          });
        }
      }
    },
    handlePackdge() {
      const spdParams = {
        roomNo: this.roomNo,
        nurseCellCode: this.nurseCellCode,
      };
      determineSPD(spdParams).then((res) => {
        if (res.data.code === 200 && res.data.data === true) {
          setTimeout(() => {
            const contentValue = `<div style="word-break:break-all;width:386px">同一病房的其他病人接触隔离或特殊疾病护理,是否继续预约?</div>`;
            this.$confirm({
              content: contentValue,
              title: "确认信息",
              okFn: (res) => {
                // this.$refs.print.$el.click()
                this._addPatientBed(this.paramsObj);
              },
              cancelFn: (res) => {
                this.nurseCellCode = "";
                this.roomNo = "";
                this._handlebed(this.stateVal);
              },
            });
          }, 500);
        } else {
          this._addPatientBed(this.paramsObj);
        }
      });
    },
    _addPatientBed(params) {
      addPatientBed(params).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.bedId = "";
          this.patientName = "";
          this.patientId = "";
          this.nurseCellCode = "";
          this.roomNo = "";
          this.$nextTick(() => {
            this.SeeBedVisible = false;
            this.$emit("untabsClick");
          });
        } else {
          this.$message.error(res.data.message);
          this.bedId = "";
          this.patientName = "";
          this.patientId = "";
          this.nurseCellCode = "";
          this.roomNo = "";
        }
      });
    },
    // 推荐床位tab获取床位列表
    tabsbedClick(bedTypeCode, par) {
      // console.log(this.bedListloading)
      this.bedListloading = true;
      // console.log(this.bedListloading)
      if (bedTypeCode !== undefined) {
        this.bedmassage.bedTypeCodeList = [bedTypeCode];
        this.tabsbedState = bedTypeCode;
        par = this.bedmassage;
      }
      console.info(par);
      const params = {
        // districtCode: '',
        bedType: bedTypeCode,
        bedState: "b",
        deptCode: par.deptCode,
        areaCode: par.areaCode,
        districtCode: Number(this.distrietCode),
      };
      // console.log(2222333, this.form.hospitalArea);
      // if (this.form.hospitalArea.sxhospital) {
      //   params.districtCode = 1
      // }
      // if (this.form.hospitalArea.xghospital) {
      //   params.districtCode = 2
      // }
      getReservationDetail(params).then((res) => {
        if (res.data.code === 200) {
          res.data.data.forEach((item) => {
            item.children.forEach((el) => {
              el.checked = false;
            });
          });
          this.bedList = res.data.data;
          if (res.data.data.length !== 0) {
            this.message.deptName = res.data.data[0].children[0].deptName;
            this.message.nurseCellName =
              res.data.data[0].children[0].nurseCellName;
          }
          this.bedListloading = false;
        }
      });
    },
    // 房间床位大于6张床删除数据
    funArr(arr) {
      arr.forEach((item) => {
        item.roomAndBedList.forEach((elm, index) => {
          if (elm.length > 6) {
            item.roomAndBedList.splice(index, 1);
          }
        });
      });
      return arr;
    },
    // beddeptChange() {
    //   this.form.illnessArea = []
    //   getPatientAreaDTO({ deptCode: this.form.department }).then(
    //     (res) => {
    //       if (res.data.code === 200) {
    //         this.form.illnessAreaoptions = res.data.data.map((element) => {
    //           return {
    //             label: element.areaName,
    //             value: element.areaId
    //           }
    //         })
    //       }
    //     }
    //   )
    // },
    // getWard() {
    //   this.form.nurseCellCodeoptions = []
    //   const parms = {
    //     districtCodeList: [this.districtChangeVal]
    //   }
    //   getWardList(parms).then((res) => {
    //     if (res.data.code === 200) {
    //       console.log(res)
    //       let dats = {
    //         label: '',
    //         value: ''
    //       }
    //       res.data.data.forEach((element) => {
    //         dats = {
    //           label: element.deptName,
    //           value: element.deptCode
    //         }
    //         this.form.illnessAreaoptions.push(dats)
    //       })
    //     }
    //   })
    // },
    // nurseCellChange() {
    //   if (this.form.department === '全部') {
    //     this.department = ''
    //     this.form.departmentoptions = []
    //     getHisCwglDeptByAreaCode({ areaCode: this.form.illnessArea }).then(
    //       (res) => {
    //         if (res.data.code === 200) {
    //           console.log(res)
    //           let dats = {
    //             label: '',
    //             value: ''
    //           }
    //           res.data.data.forEach((element) => {
    //             dats = {
    //               label: element.deptName,
    //               value: element.deptCode
    //             }
    //             this.form.departmentoptions.push(dats)
    //           })
    //         }
    //       }
    //     )
    //   }
    // },
    // 取消床位选择
    _handlebed(state) {
      if (state === "1") {
        this.bedList.forEach((item) => {
          // item.roomAndBedList.forEach((el) => {
          //   el.forEach((bed) => {
          //     bed.checked = false
          //   })
          // })
          item.children.forEach((el) => {
            el.checked = false;
          });
        });
      } else if (state === "2") {
        for (const key in this.bedListArr) {
          this.bedListArr[key].forEach((item) => {
            item.checked = false;
          });
        }
        // this.bedListArr.forEach((item) => {
        //   item.roomAndBedList.forEach((el) => {
        //     el.forEach((bed) => {
        //       bed.checked = false
        //     })
        //   })
        // })
      }
    },
    // 床位预约选中床位
    handleBed(bed, state) {
      this.nurseCellCode = bed.nurseCellCode;
      this.roomNo = bed.roomNo;
      this.patientSex = this.bedmassage.patientSex;
      this.patientId = this.bedpatient.patientId;
      this.patientName = this.bedpatient.patientName;
      const bedId = bed.bedNo;
      this.bedId = bed.bedNo;
      this.ifGy = bed.ifGy;
      this.patinetName = bed.patinetName;
      this.bedsex = bed.sex;
      const checked = !bed.checked;
      this.bedinfo =
        bed.deptName + bed.nurseCellName + "(" + bed.roomNo + ")" + bed.name;
      this.bedDeptCode = bed.deptCode;
      if (state === "1") {
        this.bedList.forEach((item) => {
          item.children.forEach((el) => {
            el.checked = false;
            if (el.bedNo === bedId) {
              el.checked = checked;
              if (el.checked === false) {
                this.bedId = "";
                this.patientName = "";
                this.patientId = "";
              }
            }
          });
        });
      } else if (state === "2") {
        for (const key in this.bedListArr) {
          // console.log(key)
          // console.log(bed)
          // console.log(this.bedListArr[key])
          this.bedListArr[key].forEach((item) => {
            if (bed.bedNo === item.bedNo) {
              bed.checked = checked;
              if (bed.checked === false) {
                this.bedId = "";
                this.patinetName = "";
                this.patientId = "";
              }
            } else {
              item.checked = false;
            }
          });
        }
        // this.bedListArr.forEach((item) => {
        //   item.roomAndBedList.forEach((el) => {
        //     el.forEach((bed) => {
        //       bed.checked = false
        //       if (bed.bedNo === bedId) {
        //         bed.checked = checked
        //         if (bed.checked === false) {
        //           this.bedId = ''
        //           this.patientName = ''
        //           this.patientId = ''
        //         }
        //       }
        //     })
        //   })
        // })
      }
    },
    // 床位查询全部查询
    _bedQuery() {
      this.getBedList();
    },
    // 床位查询全部重置
    _bedReset() {
      this.districtChangeVal = "1";
      this.bedTypeOpt = "1";
      this.form.department = "全部";
      this.form.illnessArea = "";
      this.form.bedState.kongbed = false;
      this.form.bedState.feikongbed = false;
    },
    // 获取 科室下拉框数据
    getmoreAdd() {
      const obj = this.form.hospitalArea;
      console.log("obj", obj);
      const arr = [];
      if (obj.sxhospital) {
        arr.push("1");
      }
      if (obj.xghospital) {
        arr.push("2");
      }
      const parms = {
        districtCodeList: arr,
      };
      this.form.departmentoptions = [];
      getDeptList(parms).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.form.departmentoptions = res.data.data.map((element) => {
            return {
              label: element.deptName,
              value: element.deptCode,
            };
          });
          this.form.departmentoptions.unshift({ lable: "全部", value: "全部" });
        }
      });
    },
    // 根据科室获取病区
    beddeptChange() {
      if (this.form.illnessArea === "") {
        this.form.illnessAreaoptions = [];
        getPatientAreaDTO({ deptCode: this.form.department }).then((res) => {
          if (res.data.code === 200) {
            // this.form.illnessAreaoptions = res.data.data.map((element) => {
            //   return {
            //     label: element.areaName,
            //     value: element.areaId
            //   }
            // })
            // console.log(res)
            res.data.data.forEach((item) => {
              const temp = {
                label: item.areaName,
                value: item.areaId,
              };
              this.form.illnessAreaoptions.push(temp);
            });
          }
        });
      }
    },
    // 获取病区下拉框数据
    // getWard() {
    //   let params = {
    //     districtCodeList: [this.districtChangeVal]
    //   }
    //   getWardList(params).then(res => {
    //     if (res.data.code === 200) {
    //       // console.log(res)
    //       res.data.data.forEach(item => {
    //         let temp = {
    //           label: item.deptName,
    //           value: item.deptCode
    //         }
    //         this.form.illnessAreaoptions.push(temp)
    //       })
    //     }
    //   })
    // },
    // wardChange() {
    //   if (this.form.department === '全部' || this.form.department === '') {
    //     this.form.departmentoptions = []
    //     getHisCwglDeptByAreaCode({ areaCode: this.form.illnessArea }).then(res => {
    //       console.log(res)
    //       res.data.data.forEach(item => {
    //         let temp = {
    //           label: item.deptName,
    //           value: item.deptCode
    //         }
    //         this.form.departmentoptions.push(temp)
    //       })
    //       console.log('wardChange')
    //     })
    //   }
    // }
  },
};
</script>
<style lang="less" scoped>
.middle-bed {
  min-width: 730px;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 12px;
  background-color: #fff;
  overflow: hidden;
  .view-patients {
    height: 46px;
    background: #f4f8fb;
    border: 1px solid #e7ecf8;
    color: #555555;
    padding: 16px 16px 14px 18px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .tabsbed {
    padding-left: 26px;
    span {
      display: inline-block;
      width: 110px;
      height: 42px;
      box-sizing: border-box;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
    }
    .span-active {
      color: #2165f9;
      border-bottom: 2px solid #2165f9;
    }
  }
  .department-box {
    padding: 12px 11px 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .ment {
      border-radius: 3px 3px 0px 0px;
      box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.13);
      margin-bottom: 15px;
      margin-right: 14px;
      .ment-box {
        width: 100%;
        height: 113px;
        display: flex;
        justify-content: center;
        // justify-content: space-between;
        .ment-position {
          width: 110px;
          height: 110px;
          opacity: 0.9;
          border-radius: 3px;
          font-size: 16px;
          box-sizing: border-box;
          margin-right: 12px;
          // 颜色归类
          .room-num {
            font-size: 21px;
            text-align: center;
          }
          .ment-name {
            text-align: center;
            padding-top: 3px;
            box-sizing: border-box;
          }
          .room-status {
            height: 30px;
            text-align: right;
            .status-img {
              margin-right: 10px;
            }
          }
        }
        .ment-position:last-of-type {
          margin-right: 0;
        }
        .one-div {
          color: #ffffff;
          background-color: #71acfd;
        }
        .two-div {
          color: #ffffff;
          background-color: #b0d1fe;
        }
        // 灰色
        .three-div {
          color: #555555;
          background-color: #f3f2f2;
        }
        .four-div {
          color: #ffffff;
          background-color: #fc9691;
        }
        .five-div {
          color: #ffffff;
          background-color: #fdbdba;
        }
        .ment-active {
          border: 3px dashed #ffd905;
        }
      }
    }
    .house-num {
      padding: 0 12px;
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      color: #555555;
      font-size: 12px;
    }
  }
}
.form-bed {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 21px 0 0 29px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  align-items: center;
  p {
    margin-right: 45px;
    margin-bottom: 26px;
    .bed-title {
      margin-right: 10px;
    }
  }
  .btn-p {
    display: flex;
  }
}
</style>
